<template>
  <div class="charts" ref="echarts" />
</template>
<script>

export default {
  methods: {
    initLine(xData, seriesOne, seriesTwo, seriesThree, seriesFour ) {
      const AllData = [...seriesOne, ...seriesTwo, ...seriesThree, ...seriesFour]
      // 去掉空值
      const noEmpty = AllData.filter(item => item !== '')
      // 获取最大及最小值
      const max = Math.max(...noEmpty) + 10
      const min = Math.min(...noEmpty)

      const option = {
        color: ['#4b4ffe', '#fdb722', '#1cd694', '#fb7293'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['本月预测收入', '本月实时出账收入', '本月计费收入', '上月出账收入'],
        },
        grid: {
          left: '3%',
          right: '4%',
          top: '26%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          data: xData
        },
        yAxis: {
          type: 'value',
          name: '万',
          position: 'left',
          min,
          max
        },
        series: [
          {
            name: '本月预测收入',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: seriesOne
          },
          {
            name: '本月实时出账收入',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: seriesTwo
          },
          {
            name: '本月计费收入',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: seriesThree
          },
          {
            name: '上月出账收入',
            type: 'line',
            showSymbol: false,
            smooth: true,
            data: seriesFour
          }
        ]
      }
      if (!this.echarts) this.echarts = this.$echarts.init(this.$refs.echarts)
      this.echarts.clear()
      this.echarts.setOption(option)
    }
  }
}
</script>
<style lang="less" scoped>
  .charts {
    width: 100%;
    height: 340px;
  }
</style>